<!doctype html>
<html>
    <head>
        <title>bar chart</title>
        <meta charset="utf-8" />
        <style>
         .bar {
             fill: steelblue;
         }

         .bar:hover {
             fill: red;
         }

         .axis text {
             font: 10px sans-serif;
         }

         .axis path,
         .axis line {
             fill: none;
             stroke: #000;
             shape-rendering: crispEdges;
         }
         
         .x.axis path {
             display: none;
         }
         
        </style>
    </head>
    <body>
        <svg class="chart"></svg>
        <script src="../d3.js"></script>
        <script>

         var margin = {
             top: 20, right: 30, bottom: 30, left: 40
         };
         var width = 960 - margin.left - margin.right;
         var height = 500 - margin.top - margin.bottom;

         var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
         var y = d3.scale.linear().range([height, 0]);

         var xAxis = d3.svg.axis().scale(x).orient('bottom');
         var yAxis = d3.svg.axis().scale(y).orient('left');

         var chart = d3.select('.chart')
                       .attr('width', width + margin.left + margin.right)
                       .attr('height', height + margin.top + margin.bottom)
                       .append('g')
                       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

         d3.tsv('bar3.tsv', type, function (err, data) {
             x.domain(data.map(function (d) { return d.letter }));
             y.domain([0, d3.max(data, function (d) {return d.value; })])

             chart.append('g')
                  .attr('class', 'x axis')
                  .attr('transform', 'translate(0,' + height + ')')
                  .call(xAxis);

             chart.append('g')
                  .attr('class', 'y axis')
                  .call(yAxis)
                  .append('text')
                  .attr('transform', 'rotate(-90)')
                  .attr('y', 6)
                  .attr('dy', '.71em')
                  .style('text-anchor', 'end')
                  .text('Frequency');
             
             var barWidth = width / data.length;

             var bar = chart.selectAll(".bar")
                            .data(data)
                            .enter().append('rect')
                            .attr('class', 'bar')
                            .attr('x', function (d) { return x(d.letter); })
                            .attr('y', function (d) { return y(d.value); })
                            .attr('height', function (d) { return height - y(d.value); })
                            .attr('width', x.rangeBand());
         });

         function type(d) {
             d.value = +d.value;
             return d;
         }
        </script>
    </body>
</html>
